<!--图书详情界面-->
<template>
  <div>
    <el-card v-loading="loading">
      <el-button type="primary" icon="el-icon-edit" size="small" @click="dialogVisible = true">添加角色</el-button>
      <el-table
          border
          style="width: 100%"
          :data="roles">
        <el-table-column
            type="index"
            label="#">
        </el-table-column>
        <el-table-column
            prop="name"
            label="角色名"
            width="180">
        </el-table-column>
        <el-table-column
            label="权限分配">
          <template slot-scope="scope">
            <div>
              <div :key="index" v-for="index in scope.row.rightIndexes" class="div_tag">
                <el-tag
                    closable
                    :disable-transitions="false"
                    @close="handleClose(scope.row,index)"
                >
                  {{rights[index-1]}}
                </el-tag>
              </div>
              <el-button v-if="scope.row.roleId!==0&&scope.row.roleId!==1&&scope.row.roleId!==2&&scope.row.roleId!==31" size="mini" type="danger" style="float: right;margin-left: 10px" plain @click="deleteRole(scope.row)">
               - 删 除
              </el-button>
              <el-button size="mini" type="success" style="float: right" plain @click="showRightDialog(scope.row)">
                + 权 限
              </el-button>

            </div>
          </template>
        </el-table-column>
      </el-table>

    </el-card>

<!--    添加角色对话框-->
    <el-dialog
        title="添加角色"
        :visible.sync="dialogVisible"
        width="400px"
        :before-close="beforeCloseDialog">
      <div>
        <el-input v-model="newRoleName" placeholder="新建角色名" style="width: 280px;float: left"></el-input>
        <el-button type="success" style="float: right" @click="addRole">添 加</el-button>
      </div>
      <div slot="footer" style="margin-top: 20px;margin-bottom: 10px">
        <el-button type="danger" @click="beforeCloseDialog">取 消</el-button>
      </div>
    </el-dialog>

<!--    添加权限对话框-->
    <el-dialog
        title="添加权限"
        :visible.sync="rightDialogVisible"
        width="400px"
        :before-close="closeRightDialog">
      <div>

        <el-checkbox-group
            v-model="selectRights"
        >
<!--          shownAddRightForm.rights_no_have-->
          <div v-for="rightIndex in shownAddRightForm.rights_no_have" :key="rightIndex">
            <el-checkbox :label="rights[rightIndex]"></el-checkbox>
          </div>
        </el-checkbox-group>
      </div>
      <div slot="footer" style="margin-top: 20px;margin-bottom: 10px">
        <el-button type="danger" @click="closeRightDialog">取 消</el-button>
        <el-button @click="addRight">添 加</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: "RoleManagement",
  data(){
    return{
      loading:false,
      roles:[
      ],
      rights:[
          "图书馆",
          "我的店铺",
          "购物车",
          "个性推荐",
          "热点图书",
          "我的订单"
      ],
      dialogVisible:false,
      rightDialogVisible:false,
      newRoleName:"",

      shownAddRightForm:{
        roleName:"",
        rights_no_have:[]
      },

      selectRights:[],
      addRightForm:{
        token:"",
        roleName:"",
        addRights:[]
      }
    }
  },
  created() {
    this.getRoleList();
    this.addRightForm.token=this.$store.state.token;
  },
  methods:{
    getRights(){
      //获取所有权限赋值给rights
    },
    //获取roles列表并赋值
    async getRoleList(){
      this.loading = true;
      let form = {
        token:window.sessionStorage.getItem("token")
      }
      const {data:res} = await this.$http.post('http://120.46.132.13:8081/api/role/getAllRole',form);
      console.log(res);
      if(res.code===200||res.code===0){
        this.roles = res.data.rights;
        let flag = 0;
        for(let i=0; i<this.roles.length; ++i){
          if(this.roles[i].roleId===0){
            flag = i;
            break;
          }
        }
        this.roles.splice(flag,1)
      }else{
        this.$notify.error("获取角色列表失败")
      }
      this.loading = false;
    },
    async handleClose(role,tag){
      //role.rightIndexes.splice(role.rightIndexes.indexOf(tag), 1);

      let form={
        token:this.addRightForm.token,
        roleId:role.roleId,
        delRight:tag
      }

      const {data:res} = await this.$http.post('http://120.46.132.13:8081/api/role/delRoleRight',form);

      if(res.code===0||res.code===200){
        this.$notify.success(res.message);
      }else{
        this.$notify.error(res.message);
      }
      this.getRoleList();
    },
    beforeCloseDialog(){
      this.newRoleName = "";
      this.dialogVisible = false;
    },
    async addRole(){
      let form = {
        name:this.newRoleName,
        code:"123"
      }
      //发送给后端更新角色
      console.log(form);
      const{data:res} = await this.$http.post("http://120.46.132.13:8081/api/role/addRole",form);

      if(res.code===200||res.code===0) {
        this.$notify.success("添加成功");
      }else{
        this.$notify.error("添加失败");
      }

      this.getRoleList();
      this.beforeCloseDialog();
    },

    //添加权限对话框显示按钮
    showRightDialog(role){
      this.shownAddRightForm.rights_no_have = [];

      //设置添加权限对话框需要显示的表单
      this.shownAddRightForm.roleName=role.name;
      this.addRightForm.roleName=role.name;
      for(let i=0; i<this.rights.length; ++i){
        let haven = false;
        for(let j=0; j<role.rightIndexes.length; ++j){
          if(role.rightIndexes[j]===i+1){
            haven = true;
            break;
          }
        }
        if(!haven){
          this.shownAddRightForm.rights_no_have.push(i);
        }
      }

      //展示对话框
      this.rightDialogVisible = true;
    },

    async addRight(){
      this.addRightForm.addRights=[];
      for(let i=0; i<this.selectRights.length; ++i){
        let str = this.selectRights[i];
        let index = this.rights.indexOf(str,0);
        this.addRightForm.addRights.push(index+1);
      }
      this.addRightForm.addRights.sort();
      //发送给后端this.addRightForm，包含一个token，一个角色名，一个给他添加的权限
      console.log(this.addRightForm);

      let roleName = this.addRightForm.roleName;
      let roleId = 0;
      for(let i=0; i<this.roles.length; ++i){
        if(this.roles[i].name===roleName){
          roleId = this.roles[i].roleId;
          break;
        }
      }

      let form = {
        token:window.sessionStorage.getItem("token"),
        addRights:this.addRightForm.addRights,
        roleId:roleId
      }

      const{data:res} = await this.$http.post('http://120.46.132.13:8081/api/role/addRight',form)

      if(res.code===200||res.code===0){
        this.$notify.success(res.message);
      }else{
        this.$notify.error(res.message);
      }
      //更新一下列表
      this.getRoleList();
      this.closeRightDialog();

    },

    closeRightDialog(){
      this.rightDialogVisible=false;
      this.selectRights = [];
    },

    async deleteRole(role){
      console.log(role)
      let form = {
        token:window.sessionStorage.getItem("token"),
        roleId:role.roleId
      }

      const {data:res} = await this.$http.post('http://120.46.132.13:8081/api/role/delRole',form)
      console.log(res)
      if(res.code===0||res.code===200){
        this.$notify.success("删除角色成功")
      }else {
        this.$notify.error("删除角色失败")
      }

      this.getRoleList();
    }

  }
}
</script>

<style scoped>
  .div_tag{
    float: left;
    margin-left: 5px
  }

  .el-card .el-button{
    float: right;
    margin-bottom: 8px;
  }
</style>
